//点击返回顶部
let scrolltop = document.documentElement.scrollTop
$("#foot ul .li3").click(function () {
    $("html,body").animate({ scrollTop: 0 }, 500)
})
//点击返回图标返回上一页
$("#header .fh").click(function(){
    window.location.href="yhq.html"
})
//处理url
let reg = /([^&=]+)=?([^&]*)/g
let str = decodeURI(window.location.href)
var productId = parseInt(reg.exec(str)[2])
//
$("#container").css({
    display:"none"
 })
//
fn()
//请求数据
async function fn(){
    let length = await fetch(`http://chst.vip:1234/api/getcouponproduct?couponid=${productId}`)
        .then(body => body.json())
        .then(res => {
            let resultarr = res.result
            let str = ""
            let strpic=""
            let i =0
            resultarr.forEach(item => {
                i++
                str += `
            <li couponProductId=${item.couponProductId}>
            ${item.couponProductImg}
            <p class="jieshao"">${item.couponProductName}</p>
            <p class="jiage">${item.couponProductPrice}</p>
            <p class="youxiaoqi">${item.couponProductTime}</p>
            </li>
            `
                strpic +=`
                <li>${item.couponProductImg}</li>
                `
            })
            let wrapwidth = i*200+"px"
            $("#main .lis").html(str)
            $("#container #mask .wrap").css({
                width:wrapwidth
            })
            $("#container #mask .wrap").html(strpic)
            return i
        })
        .then(res=>{
           var res = parseInt(res)
var indexpic = 0
//点击出现
$("#main .lis").on("click","li img",function(e){
    let _this =e.target
    //拿索引
    indexpic = parseInt($(_this).parent().attr("couponProductId"))
    $("#container").css({
       display:"block"
    })
    zxc(indexpic)
})
//点击消失
$(".colse li").click(function(){
    $("#container").css({
       display:"none"
    })
})
//点击左右按钮实现index++  index--
$(".arrow .left").click(function(){
    if(indexpic==0){
        alert("不能再往前了")
    }else{
        indexpic--
        zxc(indexpic)
    }
})
$(".arrow .right").click(function(){
    if(indexpic!==res-1){
        indexpic++
        zxc(indexpic)
    }else{
        alert("不能再往后了")
    }
})
//点击哪个图片出现时就定位到哪个位置
function zxc(indexpic){
    let leftlength = -indexpic*200
    //改变wrap 的 position 下的left值
    // $(".wrap").css({
    //     left:leftlength
    //  })
    //jq动画改变left值
    $(".wrap").animate({left:leftlength},200)
}
        })
}
